<template>
  <view class="content">
    <swiper :autoplay="autoplay" :duration="duration" class="swiper">
      <swiper-item :key="index" v-for="(item,index) in showInfoList">
        <view class="swiper-item">
          <image :src="item" class="start-img" />
        </view>
        <view @tap="launchFlag()" class="jump-over" v-if="index <showInfoList.length-1">{{jumpover}}</view>
        <view @tap="launchFlag()" class="experience" v-else>{{experience}}</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: ['color1', 'color2', 'color3'],
      autoplay: false,
      duration: 500,
      jumpover: '跳过',
      experience: '立即体验',
      showInfoList: [
        'https://cjos.oss-cn-shenzhen.aliyuncs.com/zlapp/start.png',
        'https://cjos.oss-cn-shenzhen.aliyuncs.com/zlapp/start.png',
        'https://cjos.oss-cn-shenzhen.aliyuncs.com/zlapp/start.png'
      ]
    }
  },
  mounted() {
    this.loadExecution()
  },
  methods: {
    launchFlag: function() {
      /**
       * 向本地存储中设置launchFlag的值，即启动标识；
       */
      uni.setStorage({
        key: 'launchFlag',
        data: true
      })
      uni.switchTab({
        url: '/pages/tabbar/ahome/ahome'
      })
    },
    loadExecution: function() {
      /**
       * 获取本地存储中launchFlag的值
       * 若存在，说明不是首次启动，直接进入首页；
       * 若不存在，说明是首次启动，进入引导页；
       */
      try {
        // 获取本地存储中launchFlag标识
        const value = uni.getStorageSync('launchFlag')
        if (value) {
          // launchFlag=true直接跳转到首页
          uni.switchTab({
            url: '/pages/tabbar/ahome/ahome'
          })
        } else {
          // launchFlag!=true显示引导页
          this.guidePages = true
        }
      } catch (e) {
        // error
        uni.setStorage({
          key: 'launchFlag',
          data: true,
          success: function() {
            console.log('error时存储launchFlag')
          }
        })
        this.guidePages = true
      }
    }
  }
}
</script>
<style>
page,
.content {
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  padding: 0;
}
.swiper {
  width: 100%;
  height: 100%;
  background: #ffffff;
}
.swiper-item {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  /* justify-content: center; */
}
.swiper-item-img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.start-img {
  width: 100%;
  height: 100%;
}
.swiper-item-img image {
  width: 80%;
}
.uniapp-img {
  height: 20%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.uniapp-img image {
  width: 40%;
}

.jump-over,
.experience {
  position: absolute;
  height: 60upx;
  line-height: 60upx;
  padding: 0 40upx;
  border-radius: 30upx;
  font-size: 32upx;
  color: #454343;
  border: 1px solid #454343;
  z-index: 999;
}
.jump-over {
  right: 45upx;
  top: 125upx;
}
.experience {
  right: 50%;
  margin-right: -105upx;
  bottom: 10%;
}
</style>
